<template>
  <view class="film-item" @click="handleClick">
    <view class="flex items-center justify-between">
      <view class="flex items-center mr-24 flex-1" @click.stop="handleToCinema">
        <text class="text-999 mr-10 text-row-1 font-24">{{ data.cinemaName }}</text>
        <zm-icon name="arrow" color="#999"></zm-icon>
      </view>
      <view v-if="data.autoTime > 0" class="flex items-center shrink-0">
        <u-icon name="clock" size="24rpx"></u-icon>
        <view class="ml-10">
          <u-count-down :time="data.autoTime * 1000" auto-start format="mm:ss" @finish="handleOnFinish"></u-count-down>
        </view>
      </view>
      <text v-else class="ml-10 shrink-0">{{ data.showStatusName }}</text>
    </view>

    <view class="mt-20 flex">
      <u-image width="120rpx" height="168rpx" radius="12rpx" :src="data.cover"></u-image>
      <view class="flex flex-col flex-1 justify-between ml-20">
        <text class="font-30 font-700">{{ data.filmName }}</text>
        <text class="text-666">{{ data.sDate }} {{ data.sTime }}</text>
        <text class="text-666 text-row-1">{{ data.hallName }} {{ data.seatDescribe }}</text>
        <text class="font-30 font-700 text-price text-price-small-before">{{ data.tripartiteAmount | formatDigit }}</text>
      </view>
    </view>

    <view class="flex justify-end mt-24">
      <zm-button v-if="data.autoTime > 0" type="primary" round height="54rpx" text-size="26rpx" @click="toPay">去支付</zm-button>
      <zm-button v-if="data.showStatus == 2" type="warning" round height="54rpx" text-size="26rpx" custom-class="ml-24" @click="handleClick">待观影</zm-button>
    </view>
  </view>
</template>

<script>
import hook from "@/mixins/hook"
import weixin from "@/mixins/weixin"
import { FILM_ORDER_STATUS } from "@/dict"
export default {
  mixins: [hook, weixin],
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      parent: null,
      FILM_ORDER_STATUS
    }
  },
  computed: {
    /*     calculatePrice() {
      const temp = this.data.otherPayInfo
      const originPrice = parseFloat(this.data?.salePrice) || 0
      const balance = parseFloat(temp?.balance) || 0
      const integralMoney = parseFloat(temp?.integralMoney) || 0
      const key = Object.keys(temp).filter((key) => key.includes("-"))
      const money = key
        .map((item) => {
          let value = 0
          if (temp[item] && temp[item]["cardPay"]?.point) {
            value += parseFloat(temp[item]["cardPay"]?.point)
          }
          if (temp[item] && temp[item]["couponPay"]?.reduce) {
            value += parseFloat(temp[item]["couponPay"].reduce)
          }
          return isNaN(value) ? 0 : value
        })
        .reduce((a, b) => a + b, 0)
      console.log(originPrice, balance, integralMoney, money)
      return originPrice - balance - integralMoney - money
    } */
  },
  methods: {
    handleOnFinish() {
      this.$emit("refresh", this.data)
    },
    handleClick() {
      this.toView({
        url: "pages/order/order-film-info/order-film-info",
        params: {
          orderId: this.data.orderId
        }
      })
    },
    handleToCinema() {
      this.toView({
        url: `pages/cinema/cinema-schedule/cinema-schedule`,
        params: { cinemaId: this.data.cinemaId }
      })
    },
    toPay() {
      if (this.data.lockJumpPay) {
        this.useAskToOSSJump(this.data.lockJumpPay)
      } else {
        this.toView({
          url: `pages/order/order-film-info/order-film-info`,
          params: {
            orderId: this.data.orderId,
            cinemaId: this.data.cinemaId
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.film-item {
  display: flex;
  padding: 24rpx;
  margin: 20rpx 24rpx;
  margin-bottom: 0;
  border-radius: 16rpx;
  flex-direction: column;
  background-color: #fff;
}
</style>
